<template>
  <div class="app">
    <input type="button" value="×" @click="back" class="back" />
    <h2>登录</h2>
    <ul class="login">
      <li>
        <span class="phone">+86</span>
        <input
          type="text"
          name="username"
          id="phone"
          placeholder="请输入手机号码"
          v-model="userName"
          v-on:change="checkphone"
        />
      </li>
      <li>
        <input
          type="password"
          name="userpass"
          id="pwd"
          placeholder="请输入密码"
          v-model="passWord"
          v-on:change="checkpass"
        />
      </li>
      <li>
        <input type="button" value="登录" class="this" @click="Login"/>
      </li>
      <li><a @click="reg">快速注册</a></li>
    </ul>

    <ul class="otherlogin">
      <li>
        <img src="./../../assets/zhy/images/weixin.png" alt="" srcset="" />
      </li>
      <li><span class="iconfont icon-wangyi0"></span></li>
      <li><img src="./../../assets/zhy/images/QQ.png" alt="" srcset="" /></li>
      <li>
        <img src="./../../assets/zhy/images/weibo.png" alt="" srcset="" />
      </li>
    </ul>
    <p>
      <input type="checkbox" name="" id="" :checked="checked" @click="CHECKED">
      我已阅读并同意<a href="">《服务协议》</a><a href="">《隐私政策》</a><a href="">《天翼账号服务协议》</a><a href="">《账号服务条款》</a>
    </p>
    <div class="agree" :style="{opacity:rgba}">请勾选同意下方协议</div>
    <div class="tips" :style="{opacity:opacity}"><p>{{msg}}</p></div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "Home",
  data() {
    return {
      tipsarr:["请检查手机格式是否正确,必须是1开头的手机号,长度必须够11位","请检查密码格式是否正确，长度至少6位","账号或密码有误，请重新输入或您未使用该手机号注册，请注册",],
      msg:'',
      opacity:0,
      rgba:0,
      checked:false,
      namearr:[],
      passarr:[],
      userName:'',
      passWord:''
    };
  },
  methods: {
    checkphone() {
      let resphone = /^1[0-9]{10}$/;
      if (resphone.test(this.userName)){
          return true;
      } else {
          this.msg = this.tipsarr[0];
          this.fade();
          return false;
      }
    },
    checkpass() {
      let regChar = /^[a-zA-Z]+$/;
      let regNum = /^\d+$/;
      let regOther = /^[!@#$]$/;
      let _regChar = /[a-zA-Z]+/;
      let _regNum = /\d+/;
      let _regOther = /[!@#$]/;
      if (this.passWord.length >= 6) {
        if (regChar.test(this.passWord) || regNum.test(this.passWord) || regOther.test(this.passWord)) {
            this.check();
        } else if (_regChar.test(this.passWord) && _regNum.test(this.passWord) && _regOther.test(this.passWord)){
            this.check();
        } else {
            this.check();
        }
        return true;
      } else {
        this.msg = this.tipsarr[0];
        this.fade();
        return false;
      }
    },
    check() {
      if (this.checkphone() == true && this.passWord != '') {
          this.style = {
            'backgroundColor':'red',
            'abled':false,
          }
          return true;
      } else {
           this.style = {
            'backgroundColor':'red',
            'abled':true,
          }
          return false;
      }
    },
    Login() {
      axios({
        url: "http://localhost:3000/VIPS",
        method: "get",
        data: {},
      })
      .then((res) => {
        console.log('正在判断');
        for(let i = 0 ;i < res.data.length;i++){
          this.namearr.push(res.data[i].userName);
          this.passarr.push(res.data[i].passWord);
        }
        if (this.namearr.indexOf(this.userName) != -1  && this.passarr.indexOf(this.passWord) != -1 && this.checked == true) {
          localStorage.setItem('username',this.userName);
          this.$router.push('/')
        }else if(this.checked == false){
          this.rgba = 1;
          setTimeout(()=>{
            this.rgba = 0;
          },2000)
        }else{
          this.msg = this.tipsarr[2];
          this.fade();
        }
      })
    },
    back() {
      this.$router.push("/");
    },
    fade(){
      this.opacity = 1
      setTimeout(()=>{
        this.opacity = 0
      },2000)
    },
    reg(){
      this.$router.push('/reg')
    },
    CHECKED(){
      this.checked = true;
    }
  },
};
</script>

<style scoped>
@import url(./../../assets/zhy/iconfont/iconfont.css);

input {
  border: none;
  outline: none;
}
h2{
  text-align: center;
  line-height: .4rem;
  margin-bottom: .1rem;
}
.back {
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  background-color: #fff;
  font-size: .24rem;
}
.login li .this {
  width: 2.3rem;
  height: 0.4rem;
  line-height: 0.4rem;
  border-radius: 10px;
  margin-bottom: 0.2rem;
}
.login li .this {
  color: #fff;
  background-color: #fe4229;
}

.login {
  list-style: none;
  width: 2.3rem;
  margin: 0 auto;
  margin-top: 0.4rem;
}
.login li {
  text-align: center;
  margin-bottom: 0.3rem;
  height: 0.4rem;
}
.login li .phone {
  float: left;
  width: 0.6rem;
  height: 0.4rem;
  font-size: 0.16rem;
  line-height: 0.4rem;
  border: 1px solid #ccc;
  color: gray;
  text-align: center;
  border-right: none;
}
.login li input {
  float: left;
  width: 2.3rem;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.16rem;
  outline: none;
  color: gray;
  text-indent: 0.16rem;
  border: 1px solid #ccc;
}
#phone {
  width: 1.67rem;
}
.otherlogin {
  margin: 0.2rem auto;
  list-style: none;
  width: 2.5rem;
  height: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}
.otherlogin li {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: #f3f3f3;
}
.otherlogin li img {
  width: 100%;
  height: 100%;
}
.otherlogin li:nth-child(3) img,
.otherlogin li:nth-child(4) img {
  width: 45%;
  height: 50%;
 transform: translate(.1rem, .1rem);
}

.iconfont {
  display: block;
  transform: translate(.1rem, .1rem);
  color: #a14051;
  font-size: 0.2rem;
}
p{
  font-size: .12rem;
  width: 2.5rem;
  margin: 0 auto;
}
p input{
  border-radius: 50%;
}
a{
  text-decoration: none;
  color: #7295bd;
}
.agree{
  margin: 0 auto;
  margin-top: -1rem;
  width: 1.6rem;
  height: .5rem;
  line-height: .5rem;
  border-radius: .25rem;
  color: #000;
  font-size: .13rem;
  background-color: #f3f3f3;
  position: relative;
  text-align: center;
}
.tips{
  position: fixed;
  left: 50%;
  top: 55%;
  transform: translate(-50%,-50%);
  width: 2.5rem;
  height: .7rem;
  text-align: center;
  background-color: #ccc;
}
.tips p{
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%,-50%);
  text-align: center;
  background-color: #ccc;
  color: #444;
  font-size: 12px;
  width: 100%;
}
</style>

